import { defineConfig } from "vite";
// todo 这个是vite默认的 如果报错你可以自己yarn add
import vue from "@vitejs/plugin-vue";
// todo 这个是node的内置模块
import path from "path";
import postCssPxToRem from "postcss-pxtorem";
// todo 你需要yarn add vite-plugin-style-import这个插件
import styleImport, { VantResolve } from "vite-plugin-style-import";
// todo 你需要yarn add unplugin-vue-components 才能使用下面连个插件
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //todo 样式解析插件
    styleImport({
      resolves: [VantResolve()],
    }),
    //todo 组件解析插件 打包时候有用
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  // todo vite的配置别名 默认是这个用法
  resolve: {
    /**
     * __dirname是根目录，是这个path的方法提供的默认值，代码内部会自己匹配
     */
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@/c": path.resolve(__dirname, "src/components"),
      "@/a": path.resolve(__dirname, "src/assets"),
    },
  },
  // todo 这里是你的本地服务配置，关注port这个端口号就行了
  server: {
    port: 7709,
    proxy: {
      // https://vitejs.cn/config/#server-proxy
      "/api": "http://localhost:4567",
    },
  },
  //todo  这里是打包的配置
  build: {
    // 指定生成静态资源的存放路径（相对于 build.outDir）。
    assetsDir: "/assets",
    // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求 0 禁用
    assetsInlineLimit: 1024 * 6,
    // todo 这里是定义打包时候的文件名称，你可以暂时先不管  不用下载什么插件
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },
  //todo 这里是配置rem的 您需要 yarn add postcss-pxtorem 这个插件
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 根大小
          rootValue: 37.5,
          // 保留几位小数
          unitPrecision: 4,
          // 可以从px转成rem的属性 * 是全部css属性
          propList: ["*"],
          // 最小转换值
          minPixelValue: 1,
          // 忽略转换 的属性开头
          // selectorBlackList: [".van"],
        }),
      ],
    },
  },
});
/**
 *  
 * todo 如果你项目需要less/sass你就单独yarn add less 推荐less 不需要配置vite
 * todo 如果你需要 vuex yarn add vuex 不需要配置vite
 * todo 如果你需要 vue-router yarn add vue-router 不需要配置vite
 */